<template>
	<div class="sing-up table-theme">
		<head-title title="营销--报名统计"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<div class="sign-export-view add">
				<el-button type="primary" size="small" @click="exDialog = true">导出记录</el-button>
				<p>总数据数：{{total}}</p>
			</div>
			<el-table :data="List">
				<el-table-column label="序号" align="center" prop="id"></el-table-column>
				<el-table-column label="活动标题	" align="center" prop="title"></el-table-column>
				<el-table-column label="用户编号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="昵称" align="center" prop="name"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="公司名称" align="center" prop="company_name"></el-table-column>
				<el-table-column label="城市" align="center" prop="city"></el-table-column>
				<el-table-column label="人数" align="center" prop="num"></el-table-column>
				<el-table-column label="支付状态" align="center" prop="status_name"></el-table-column>
				<el-table-column label="推荐人" align="center" prop="belong_refer"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
		
		<!-- 弹框 -->
		<el-dialog title="导出用户报名统计" :visible.sync="exDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="exForm" :rules="exFormRules" ref="exForm" label-width="120px">
				<el-form-item label="页数:" prop="page"><el-input placeholder="请输入页数" v-model="exForm.page"></el-input></el-form-item>
				<el-form-item label="条数:" prop="limit"><el-input placeholder="请输入条数" v-model="exForm.limit"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="exDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('exForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import TabsView from '@/components/TabsView'
export default {
	components:{
			TabsView
		},
	data() {
		return {
			exDialog: false,
			exForm: {
				page: 1,
				limit: 100,
			},
			exFormRules: {
				page: [{ required: true, message: '请输入页数' }],
				limit: [{ required: true, message: '请输入条数' }],
			},
			List: [], // 列表
			total: 0,
			totalData: 0,
			status: 0,
			page: 0,
			classifyList: ['全部' ,'未支付' ,'已支付' ],
			searchOption: [{
				value: 0,
				label: '推荐人'
			},
			{
				value:1,
				label:'姓名'
			},
			{
				value:2,
				label:'电话'
			}],
			classSelect:0,
			selectContent:''
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10
			};
			if (this.status != 0) {
				// data.pay_status 0 未支付 1 已支付
				data.pay_status = this.status - 1;
			}

			// classSelect 1推荐人  2姓名 3电话
			if (this.classSelect == 0 && this.selectContent != '') {
				data.belong_refer = this.selectContent;
			} else if (this.classSelect == 1 && this.selectContent != '') {
				data.name = this.selectContent;
			} else if (this.classSelect == 2 && this.selectContent != '') {
				data.phone = this.selectContent;
			}

			this.$http(this.$ApiList.SignList, data).then(res => {
				this.List = [];
				if (res.datas.length != 0) {
					this.List = res.datas.data;
					this.total = res.datas.count;
					this.totalData = res.datas.count;
				}
			});
		},
		stateType(type) {
			this.status = type;
			this.init();
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let url = `${this.$domain}furniture/Adminexcel/SignDataExcel?page=` + this.exForm.page + '&limit=' + this.exForm.limit
					url = url + '&belong_refer=' + this.serach.searchContent
					if (this.status != 0) {
						// data.pay_status 0 未支付 1 已支付
						let pay_status = this.status - 1;
						url = url + '&pay_status=' + pay_status
					}
					window.location.href = url					
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 搜素
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		refreshPage() {
			this.selectContent = '';
			this.status = 0;
			this.classSelect = 0;
			this.init();
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>
.sign-export-view {
	display: flex;
	margin: 10px 0;
}
.sign-export-view p {
	flex: 1;
	text-align: right;
	line-height: 30px;
}
</style>
